<template>
    <div class="city-header">
        <router-link to="/" class="iconfont">&#xe63b;</router-link>
        <span>
              城市选择
          </span>
    </div>
</template>

<script>
  // 城市选择的头部组件
  export default {
    name: 'CityHeader',
  }
</script>

<style scoped lang="stylus">
    @import "../assets/varibles.styl"
    .city-header {
        overflow hidden;
        height: $headerHeight
        line-height: $headerHeight
        text-align: center;
        color: #fff;
        background-color: $bgcolor;
        position: relative;
        .iconfont {
            float: left
            transform: translateX(5px)
            font-size: 0.5rem;
            color: #fff;
        }
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }
    }
</style>